<template>
<div class="mapToolbar">
    <div class="mapToolbar-btnGroup">
        <!-- 三维罗盘 -->
        <el-tooltip class="item" effect="dark" content="回正" placement="right">
            <div v-show="mapModuleIndex===1||mapModuleIndex===2" class="mapToolbar-btn">
                <el-button icon="el-icon-position" style="font-size: 18px;" @click="rotateNorth" />
            </div>
        </el-tooltip>

        <!-- 全球 -->
        <el-tooltip class="item" effect="dark" content="全球" placement="right">
            <div v-show="mapModuleIndex===1||mapModuleIndex===2" class="mapToolbar-btn">
                <el-button icon="el-icon-s-home" style="font-size: 18px;" @click="goEarch" />
            </div>
        </el-tooltip>

        <!-- 全球 -->
        <el-tooltip class="item" effect="dark" content="绕物旋转" placement="right">
            <div v-show="mapModuleIndex===1||mapModuleIndex===2" class="mapToolbar-btn">
                <el-button icon="kfb-icon-dingwei" style="font-size: 18px;" @click="rotateEarch" />
            </div>
        </el-tooltip>

        <!-- 系统全屏 -->
        <el-tooltip class="item" effect="dark" content="全屏" placement="right">
            <div class="mapToolbar-btn">
                <el-button icon="el-icon-full-screen" @click="appFullScreen" />
            </div>
        </el-tooltip>

        <!-- 地图切换 -->
        <el-tooltip class="item" effect="dark" content="地图切换" placement="right">
            <div v-show="mapModuleIndex===0" class="mapToolbar-btn">
                <el-button icon="kfb-icon-quanqiu" @click="selectBaseMap" />
            </div>
        </el-tooltip>

        <!-- 地图模块切换 -->
        <el-tooltip class="item" effect="dark" content="二三维切换" placement="right">
            <div class="mapToolbar-btn">
                <el-button icon="kfb-icon-ditu" @click="selectMapModule" />
            </div>
        </el-tooltip>

        <!-- 搜索 -->
        <el-tooltip class="item" effect="dark" content="地名查询" placement="right">
            <div class="mapToolbar-btn">
                <el-button icon="kfb-icon-dingwei" @click="selectSearch" />
            </div>
        </el-tooltip>

        <!-- 地形夸张 -->
        <el-tooltip class="item" effect="dark" content="地形夸张" placement="right">
            <div v-show="mapModuleIndex===1||mapModuleIndex===2" class="mapToolbar-btn">
                <el-button icon="kfb-icon-shake-outline" @click="altitudeEx" />
            </div>
        </el-tooltip>

        <!-- 测量 -->
        <el-tooltip class="item" effect="dark" content="量测" placement="right">
            <div class="mapToolbar-btn">
                <el-button icon="kfb-icon-celiang3" @click="selectMeasure" />
            </div>
        </el-tooltip>
        <!-- 书签 -->
        <el-tooltip class="item" effect="dark" content="书签" placement="right">
            <div class="mapToolbar-btn">
                <el-button icon="el-icon-paperclip" @click="selectBookMark" />
            </div>
        </el-tooltip>
        <!--双屏-->
        <el-tooltip class="item" effect="dark" content="双屏对比" placement="right">
            <div v-show="mapModuleIndex===0" class="mapToolbar-btn">
                <el-button icon="kfb-icon-compared" @click="doubleScreenSwitch" />
            </div>
        </el-tooltip>
        <!--打印 -->
        <el-tooltip class="item" effect="dark" content="打印出图" placement="right">
            <div v-show="mapModuleIndex===0" class="mapToolbar-btn">
                <el-button icon="kfb-icon-dayin" @click="selectPrint" />
            </div>
        </el-tooltip>
        <!--底图选择-->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===1" class="common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">选择底图</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <div class="layer-items clearfix">
                    <a v-for="item in baseMapGroup" :key="item._id" :class="item.checked ?'isChecked':''" @click="checkBaseGroup($event,item)">
                        <el-image :src="'./static/img/basemap/'+ item.name +'.jpg'" style="width: 78px; height: 58px" fit="fill" />
                        {{ item.name }}
                    </a>
                </div>
            </div>
        </transition>
        <!--地图模块选择-->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===5" class="common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">地图模块切换</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <div class="layer-items clearfix">
                    <a :class="mapModuleIndex===0?'isChecked':''" @click="switchMapModule($event,0)">
                        <el-image src="./static/img/mapmodule/map.png" style="width: 78px; height: 58px" fit="contain" />二维地图
                    </a>
                    <a :class="mapModuleIndex===1?'isChecked':''" @click="switchMapModule($event,1)">
                        <el-image src="./static/img/mapmodule/earth.png" style="width: 78px; height: 58px" fit="contain" />三维场景
                    </a>
                    <a :class="mapModuleIndex===2?'isChecked':''" @click="switchMapModule($event,2)">
                        <el-image src="./static/img/mapmodule/二三维联动.png" style="width: 78px; height: 58px" fit="contain" />同屏联动
                    </a>
                </div>
            </div>
        </transition>

        <!--搜索-->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===2" class="common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">地名搜索</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <el-input ref="poi_input" v-model="placeName" placeholder="请输入地名地址" class="input-with-select" clearable size="small" @keyup.enter.native="poiSearch">
                    <el-button slot="append" size="mini" icon="el-icon-search" @click="poiSearch" />
                </el-input>

                <ul class="infinite-list">
                    <li v-for="i in poiData" class="infinite-list-item" @click.stop="poiLocation($event,i)">
                        <!-- {{ i.name }}
            <span
              class="el-icon-location poi-location"
              @click.stop="poiLocation($event,i)"
              />-->
                        <span class="el-icon-location poi-location searchPoiResult" />
                        <span class="searchPoiResult" @click.stop="poiLocation($event,i)">{{ i.name }}</span>
                    </li>
                </ul>
                <el-pagination :pager-count="5" :hide-on-single-page="true" :current-page.sync="currentPage" :page-size="pageSize" :total="total" small layout="total, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </transition>

        <!-- 地形夸张 -->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===8" class="altitude-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">地形夸张</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <el-slider v-model="altitudeVal" :marks="marks" :min="1" :max="10" show-input @change="altitudeChange" />
            </div>
        </transition>

        <!-- 河流搜索 -->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===6" class="common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">河湖搜索</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <el-input ref="river_input" v-model="riverName" placeholder="河湖名称" class="input-with-select" clearable size="small" @keyup.enter.native="riverSearch">
                    <el-button slot="append" size="mini" icon="el-icon-search" @click="riverSearch" />
                </el-input>

                <ul class="infinite-list">
                    <li v-for="i in riverData" class="infinite-list-item" @click.stop="poiLocation($event,i)">
                        <!-- {{ i.name }}
            <span
              class="el-icon-location poi-location"
              @click.stop="poiLocation($event,i)"
              />-->
                        <span class="el-icon-location poi-location searchPoiResult" />
                        <span class="searchPoiResult" @click.stop="riverLocation($event,i)">{{ i['河湖名称']+"("+i['行政区域']+")" }}</span>
                    </li>
                </ul>
                <el-pagination :pager-count="5" :hide-on-single-page="true" :current-page.sync="currentPage_river" :page-size="pageSize_river" :total="total_river" small layout="total, prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange_River" />
            </div>
        </transition>

        <!--测量-->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===3" class="common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">测量工具</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <el-divider />
                <div style=" margin-top: 0px;" class="layer-arguments">
                    <a class="kfb-icon-juli2" @click="measureLength">&nbsp;&nbsp;测距</a>
                </div>
                <div class="layer-arguments">
                    <a class="kfb-icon-mianji" @click="measurePolygon">&nbsp;&nbsp;测面</a>
                </div>
                <div class="layer-arguments">
                    <a class="kfb-icon-shanchu1" @click="measureClear">&nbsp;&nbsp;清除</a>
                </div>
            </div>
        </transition>

        <!--书签-->
        <transition name="el-zoom-in-top">
            <div v-if="isVisible===4" class="bookmarkPanel common-panel layer-pop">
                <span class="angle-to-right" />
                <span class="common-panel-title">书签工具</span>
                <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
                <i class="tab-pane-header-btn-addBookmark kfb-icon-plus-outline" @click="addBookMark" />
                <el-divider />
                <span v-if="!hasData" style="position:relative;font-size: 10px;">没有数据</span>
                <div v-for="item in bookmarks" v-else="hasData" :key="item._id" class="layer-arguments">
                    <a class="el-icon-location" />
                    <span @click="locateTo(item)">&nbsp;{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
                    <a class="bookmarkDel kfb-icon-icon-test62" @click="handleDelete(item)" />
                    <a class="bookmarkDel kfb-icon-bianji2" @click="handleEdit(item)" />
                </div>
            </div>
        </transition>

        <!--添加书签-->
        <el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="false" title="添加书签" width="400px" append-to-body>
            <el-form>
                <el-form-item label="书签名称" label-width="80px">
                    <el-input ref="book_input" v-model="form.name" autocomplete="off" size="small" @keyup.enter.native="handleConfirm" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</template>

<script>
import {
    mapState
} from 'vuex'
import {
    add,
    remove,
    update,
    list
} from '@/api/bookmark'
import Clone from '@/utils/clone'
import {
    poiList,
    poiAddress
} from '@/api/poi'
import {
    searchRiverByName
} from '@/api/hzz/search'
import SmQuery from '@/assets/js/utils/SmQuery.js'
import BoxUtil from '@/assets/js/utils/BoxUtil.js'

export default {
    name: 'Index',
    data() {
        return {
            isVisible: 0,
            dialogFormVisible: false, // 对话框
            bookmarks: [], // 书签数据
            form: {}, // 书签表单
            isAdd: false,
            placeName: '',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            poiData: [],
            // 河流是否可以选中状态
            riverIsSelectIcon: 'kfb-icon-move-outline',

            // 地形夸张
            altitudeVal: 1,

            // -----------河湖搜索-----------
            riverName: '',
            currentPage_river: 1,
            pageSize_river: 10,
            total_river: 0,
            riverData: [],
            riverLayerName: 'river@hzz',
            riverServiceUrl: 'http://218.10.70.76:8091/iserver/services/map-Hzz/rest/maps/river',
            rotate: false,
            riverDataUrl: 'http://218.10.70.76:8091/iserver/services/data-Hzz/rest/data'
        }
    },
    mounted() {
        this.mapService.on('map.init', this.mapInitComplete, this)
    },
    methods: {
        selectFeature($event) {
            this.riverIsSelectIcon === 'kfb-icon-move-outline' ?
                (this.riverIsSelectIcon = 'kfb-icon-checkmark-outline') :
                (this.riverIsSelectIcon = 'kfb-icon-move-outline')
            this.$store.commit('hzzSys/setIsSelected', !this.isSelect)
        },
        /**
         * 选择底图
         */
        selectBaseMap($event) {
            this.isVisible = this.isVisible === 1 ? 0 : 1
        },

        /**
         * 选择地图模块
         */
        selectMapModule() {
            this.isVisible = this.isVisible === 5 ? 0 : 5
        },
        /**
         * 选择搜索
         */
        selectSearch() {
            this.isVisible = this.isVisible === 2 ? 0 : 2
            if (this.isVisible) {
                this.$nextTick(() => {
                    this.$refs['poi_input'].focus()
                })
            }
        },
        /**
         * 打印
         */
        selectPrint() {
            const map = this.comparable.getMap()
            var param = {
                style: map.getStyle(),
                center: map.getCenter(),
                zoom: map.getZoom()
            }
            const routeData = this.$router.resolve({
                path: '/printer',
                query: {
                    opt: JSON.stringify(param)
                }
            })
            window.open(routeData.href, '_blank')
            // window.print();
        },

        /**
         * 选择河湖搜索
         */
        selectRiverSearch() {
            this.isVisible = this.isVisible === 6 ? 0 : 6
            if (this.isVisible) {
                this.$nextTick(() => {
                    this.$refs['river_input'].focus()
                })
            }
        },

        /**
         * 选择测量
         */
        selectMeasure() {
            this.isVisible = this.isVisible === 3 ? 0 : 3
        },

        /**
         * 选择书签
         */
        selectBookMark() {
            this.isVisible = this.isVisible === 4 ? 0 : 4
            if (this.bookmarks.length > 0) {
                return
            }
            this.getBookMarks()
        },

        /**
         * 选择基础底图
         * @param $event
         * @param item
         */
        checkBaseGroup($event, item) {
            if (item.checked) {
                return
            }
            this.mapService.setBaseLayer(item.layers)
            this.baseMapGroup.forEach(group => {
                this.$set(group, 'checked', group._id === item._id)
            })
        },
        /**
         * map style初始化完成函数
         */
        mapInitComplete() {
            if (this.isloadComplete) {
                this.mapService.setBaseLayer(this.baseLayers)
            }
            this.isloadComplete = true
            this.baseMapGroup.forEach((group, i, array) => {
                this.$set(group, 'checked', i === this.index)
            })
        },

        /**
         * 测量长度
         */
        measureLength() {
            this.measureSync.setDrawAction(0)
            // this.mapService.getMeasureTool().setDrawAction(0);
            // 三维量算
            if (this.sceneViewer !== null) {
                if (this.sceneTool === null) {}
                this.sceneTool.measureDis()
            }
        },
        /**
         * 测量面积
         */
        measurePolygon() {
            this.measureSync.setDrawAction(1)
            // this.mapService.getMeasureTool().setDrawAction(1);
            // 三维量算
            if (this.sceneViewer !== null) {
                if (this.sceneTool === null) {
                    this.sceneTool = new SceneTool(this.sceneViewer)
                }
                this.sceneTool.measureArea()
            }
        },
        /**
         * 清除测量
         */
        measureClear() {
            // this.mapService.getMeasureTool().clearMeasure();
            this.measureSync.clearMeasure()
            // 三维量算
            if (this.sceneViewer !== null) {
                if (this.sceneTool === null) {
                    this.sceneTool = new SceneTool(this.sceneViewer)
                }
                this.sceneTool.clearAll()
            }
        },
        /**
         * 添加书签
         */
        addBookMark() {
            this.isAdd = true
            this.dialogFormVisible = true
            this.$nextTick(function () {
                this.$refs['book_input'].focus()
            })
            const map = this.comparable.getMap()
            const sceneViewer = this.sceneViewer
            const mapModuleIndex = this.mapModuleIndex
            if (mapModuleIndex === 0) {
                const camera = {
                    center: map.getCenter(),
                    zoom: map.getZoom(),
                    bear: map.getBearing(),
                    pitch: map.getPitch()
                }
                this.form = {
                    uid: this.$store.getters.id,
                    camera: camera,
                    type: 0,
                    name: ''
                }
            } else if (mapModuleIndex === 1) {
                const camera = {
                    position: sceneViewer.camera.positionCartographic,
                    heading: sceneViewer.camera.heading,
                    pitch: sceneViewer.camera.pitch,
                    roll: sceneViewer.camera.roll
                }
                this.form = {
                    uid: this.$store.getters.id,
                    camera: camera,
                    type: 1,
                    name: ''
                }
            } else if (mapModuleIndex === 2) {
                const camera = {
                    center: map.getCenter(),
                    zoom: map.getZoom(),
                    bear: map.getBearing(),
                    pitch: map.getPitch()
                }
                this.form = {
                    uid: this.$store.getters.id,
                    camera: camera,
                    type: 0,
                    name: ''
                }
            }
        },

        handleSizeChange(val) {},

        /**
         * 翻页
         * @param val
         */
        handleCurrentChange(val) {
            this.currentPage = val
            this.requestPoiData()
        },

        /**
         * 翻页
         */
        handleCurrentChange_River(val) {
            this.currentPage_river = val
            this.requestRiverData()
        },
        /**
         * 搜索按钮
         */
        poiSearch() {
            this.currentPage = 1
            this.poiData = []
            this.total = 0
            this.requestPoiData()
        },

        /**
         * 河湖搜索时间点击
         */
        riverSearch() {
            this.currentPage_river = 1
            this.pageSize_river = 10
            this.total_river = 0
            this.requestRiverData()
        },

        /**
         * 请求数据
         */
        requestPoiData() {
            poiList({
                keyWord: this.placeName,
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            }).then(res => {
                this.total = res.data.tatol
                this.poiData = res.data.data
                if (this.total == 0) {
                    this.$message({
                        type: 'info',
                        message: '没有数据!'
                    })
                }
            })
        },

        /**
         * 河湖数据搜索
         */
        requestRiverData() {
            // searchRiverByName
            searchRiverByName({
                keyWord: this.riverName,
                skip: (this.currentPage_river - 1) * this.pageSize_river,
                limit: this.pageSize_river
            }).then(res => {
                this.total_river = res.data.count
                this.riverData = res.data.data
                if (this.total_river == 0) {
                    this.$message({
                        type: 'info',
                        message: '没有数据!'
                    })
                }
            })
        },

        /**
         * poi定位
         * @param e
         * @param item
         */
        poiLocation(e, item) {
            poiAddress({
                _id: item.id
            }).then(async res => {
                const mapModuleIndex = this.mapModuleIndex
                const maps = await this.mapService.getMap()
                switch (mapModuleIndex) {
                    case 0:
                    case 2:
                        this.mapService.addMarker([
                            parseFloat(res.data.gpsx),
                            parseFloat(res.data.gpsy)
                        ])
                        if (this.sceneViewer) {
                            if (this.sceneViewer.entities.getById('position')) {
                                this.sceneViewer.entities.removeById('position')
                            }

                            const positions = Cesium.Cartographic.fromDegrees(
                                res.data.gpsx,
                                res.data.gpsy
                            )

                            const promise = Cesium.sampleTerrain(
                                this.sceneViewer.terrainProvider,
                                13,
                                [positions]
                            )

                            Cesium.when(promise, updatedPositions => {
                                const terrainHeight = updatedPositions[0].height
                                this.sceneViewer.entities.add({
                                    id: 'position',
                                    position: Cesium.Cartesian3.fromDegrees(
                                        res.data.gpsx,
                                        res.data.gpsy,
                                        terrainHeight + 10
                                    ),
                                    billboard: {
                                        image: '/static/img/milSearch/location.png',
                                        verticalOrigin: Cesium.VerticalOrigin.TOP
                                    }
                                })
                            })
                        }
                        break
                    case 1:
                        if (this.sceneViewer.entities.getById('position')) {
                            this.sceneViewer.entities.removeById('position')
                        }

                        const positionsa = Cesium.Cartographic.fromDegrees(
                            res.data.gpsx,
                            res.data.gpsy
                        )

                        const promisea = Cesium.sampleTerrain(
                            this.sceneViewer.terrainProvider,
                            13,
                            [positionsa]
                        )

                        Cesium.when(promisea, updatedPositions => {
                            const terrainHeight = updatedPositions[0].height
                            this.sceneViewer.entities.add({
                                id: 'position',
                                position: Cesium.Cartesian3.fromDegrees(
                                    res.data.gpsx,
                                    res.data.gpsy,
                                    terrainHeight + 10
                                ),
                                billboard: {
                                    image: '/static/img/milSearch/location.png',
                                    verticalOrigin: Cesium.VerticalOrigin.TOP
                                }
                            })
                        })

                        this.sceneViewer.camera.flyTo({
                            destination: Cesium.Cartesian3.fromDegrees(
                                res.data.gpsx,
                                res.data.gpsy,
                                2000
                            ),
                            duration: 3,
                            orientation: {
                                heading: 6.283185307179586,
                                pitch: -1.5707963267948966,
                                roll: 0
                            }
                        })

                        break
                }
            })
        },

        riverLocation(e, item) {},

        /**
         * 获取书签列表
         */
        getBookMarks() {
            const mapModuleIndex = this.mapModuleIndex
            switch (mapModuleIndex) {
                case 0:
                    list({
                        type: 0,
                        uid: this.$store.getters.id
                    }).then(res => {
                        this.bookmarks = res.data
                    })
                    break
                case 1:
                    list({
                        type: 1,
                        uid: this.$store.getters.id
                    }).then(res => {
                        this.bookmarks = res.data
                    })
                    break
                case 2:
                    list({
                        type: 0,
                        uid: this.$store.getters.id
                    }).then(res => {
                        this.bookmarks = res.data
                    })
                    break
            }
        },
        /**
         * 提交
         */
        handleConfirm() {
            if (this.isAdd) {
                add(this.form).then(res => {
                    this.bookmarks.push(res.data)
                    this.dialogFormVisible = false
                })
            } else {
                update(this.form).then(res => {
                    const index = this.bookmarks.findIndex(o => o._id === this.form._id)
                    this.bookmarks.splice(index, 1, this.form)
                    this.dialogFormVisible = false
                })
            }
        },
        /**
         * 删除书签
         * @param item
         */
        handleDelete(item) {
            this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                .then(() => {
                    remove(item).then(res => {
                        this.bookmarks.splice(this.bookmarks.indexOf(item), 1)
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        /**
         * 编辑书签
         * @param item
         */
        handleEdit(item) {
            this.form = Clone.clone(item)
            this.dialogFormVisible = true
            this.isAdd = false
        },
        /**
         * 书签定位
         * @param item
         */
        locateTo(item) {
            const mapModuleIndex = this.mapModuleIndex
            switch (mapModuleIndex) {
                case 0:
                case 2:
                    // const map = this.mapService.getMap();
                    const map = this.comparable.getMap()
                    map.flyTo({
                        center: item.camera.center,
                        zoom: item.camera.zoom,
                        bearing: item.camera.bear,
                        pitch: item.camera.pitch,
                        duration: 3000,
                        speed: 0.2,
                        curve: 1
                    })
                    break
                case 1:
                    const lat = Cesium.Math.toDegrees(item.camera.position.latitude)
                    const log = Cesium.Math.toDegrees(item.camera.position.longitude)
                    const alt = item.camera.position.height
                    this.sceneViewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(log, lat, alt),
                        duration: 3,
                        orientation: {
                            heading: item.camera.heading,
                            pitch: item.camera.pitch,
                            roll: item.camera.roll
                        }
                    })
                    break
            }
        },

        /**
         * 二三维切换
         * @param event
         * @param index
         */
        switchMapModule(event, index) {
            this.$store.commit('eswyzt/setSwitchMapModuleIndex', index)
            this.getBookMarks()
            this.isVisible = 0
            this.$nextTick(() => {
                const ev = new Event('resize', {
                    bubbles: true,
                    cancelable: false
                })
                window.dispatchEvent(ev)
            })
        },
        /**
         * 双屏对比
         */
        doubleScreenSwitch() {
            this.doubleScreen = !this.doubleScreen
            if (this.doubleScreen) {
                this.comparable.setMode(0)
            } else {
                this.comparable.setMode(2)
            }
            this.$emit('onDoubleScreenSwitch', this.doubleScreen)
        },
        /**
         * 系统全屏
         */
        appFullScreen() {
            if (document.fullscreenElement) {
                // 存在全屏状态下的节点
                if (document.exitFullscreen) {
                    document.exitFullscreen()
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen()
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen()
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen()
                }
            } else {
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen()
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen()
                } else if (document.documentElement.msRequestFullscreen) {
                    document.documentElement.msRequestFullscreen()
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen()
                }
            }
        },

        /**
         * 回正
         */
        rotateNorth() {
            const scene = this.sceneViewer.scene
            scene.camera.flyTo({
                destination: scene.camera.position,
                orientation: {
                    heading: Cesium.Math.toRadians(0)
                }
            })
        },

        /**
         * 重置回到地球
         */
        goEarch() {
            this.sceneViewer.camera.flyTo({
                destination: new Cesium.Cartesian3.fromDegrees(
                    110.60396458865515,
                    34.54408834959379,
                    30644793.325518917
                ),
                duration: 5
            })
        },

        /**
         * 绕物旋转
         */
        rotateEarch() {
            this.rotate = !this.rotate
            if (this.rotate) {
                this.sceneTool.Spin()
            } else {
                this.sceneTool.cancelSpin()
            }
        },

        /**
         * 地形夸张改变数值
         */
        altitudeChange($event) {
            this.sceneViewer.scene.terrainExaggeration = $event
        },

        /**
         * 地形夸张
         */
        altitudeEx($event) {
            this.isVisible = this.isVisible === 8 ? 0 : 8
        }
    },
    computed: {
        ...mapState({
            isSelect(state) {
                return state.hzzSys.isSelected
            },
            // 底图分组
            baseMapGroup(state) {
                return state.user.baseGroup
            },
            // 默认显示图层
            baseLayers(state) {
                return state.user.baseLayers
            },

            baseLayers_3D(state) {
                return state.user.baseLayers_3D
            },

            baseMapGroup_3D(state) {},

            // 地图模块控件
            mapModuleIndex(state) {
                return state.eswyzt.mapModuleIndex
            },

            mapService(state) {
                return state.eswyzt.mapService
            },

            sceneViewer(state) {
                return state.eswyzt.sceneViewer
            },

            sceneTool(state) {
                return state.eswyzt.sceneTool
            },

            displayStaticPanelIsShow(state) {
                return state.hzzSys.displayStaticPanelIsShow
            },

            // --------------------------双屏需要用到的------------------------------
            /**
             * 同步测量
             * @param state
             * @returns {measureSync|(function(*))|*}
             */
            measureSync(state) {
                return state.eswyzt.measureSync
            },

            /**
             * 比较
             * @param state
             * @returns {comparable|(function(*))|*}
             */
            comparable: function (state) {
                return state.eswyzt.comparable
            }
        }),
        // 书签是否有数据
        hasData() {
            return this.bookmarks.length > 0
        }
    },
    beforeDestroy() {
        this.mapService.off('map.init', this.mapInitComplete)
        this.baseMapGroup.forEach((group, i) => {
            this.$set(group, 'checked', i === 0)
        })
    },
    watch: {
        isVisible: function (n, o) {
            if (n == 0 && o === 2) {
                // 关闭搜索
                this.mapService.removeMarker()
                if (this.mapModuleIndex === 1 || this.mapModuleIndex === 2) {
                    if (
                        this.sceneViewer &&
                        this.sceneViewer.entities.getById('position')
                    ) {
                        this.sceneViewer.entities.removeById('position')
                    }
                }
            }

            if (n == 0 && o === 6) {
                // 关闭高亮
                this.mapService.setHightLihgtFilter(this.riverLayerName, '')
                if (this.mapModuleIndex === 1 || this.mapModuleIndex === 2) {
                    if (
                        this.sceneViewer &&
                        this.sceneViewer.entities.getById('highRiver')
                    ) {
                        this.sceneViewer.entities.removeById('highRiver')
                    }
                }
            }
        }
    }
}
</script>

<style>
.mapToolbar .mapToolbar-btnGroup {
    position: absolute;
    top: 100px;
    right: 35px;
    z-index: 999;
    cursor: pointer;
}

.mapToolbar .mapToolbar-btnGroup .el-button {
    border-radius: 0px;
    padding: 6px 6px;
    width: 32px;
    height: 32px;
    color: #fff;
    border-width: 0px;
    background: rgba(38, 38, 38, 0.7);
    text-shadow: 0.2rem 0rem 0.5rem #09b0ac, -0.2rem 0rem 0.5rem #09b0ac,
        0rem 0.2rem 0.5rem #09b0ac, 0rem -0.2rem 0.5rem #09b0ac;
}

.mapToolbar .mapToolbar-btn {
    margin-top: 10px;
    margin-bottom: 10px;
    /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);*/
}

/* 工具面板样式 */

.mapToolbar .common-panel {
    position: absolute;
    right: 83px;
    top: 100px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 5px;
    z-index: 999;
    cursor: auto;
    min-width: 116px;
    /*border-radius: 10px;*/
}

.mapToolbar .common-panel .el-divider--horizontal {
    margin: 8px 0;
}

.mapToolbar .common-panel-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 10px;
    color: #fff;
    margin-top: 0;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    /*border-bottom: 1px solid #eee;*/
}

.mapToolbar .common-panel .close {
    position: absolute;
    right: 7px;
    top: 9px;
}

/* 地形夸张面板样式 */

.mapToolbar .altitude-panel {
    position: absolute;
    right: 83px;
    top: 100px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    padding: 5px;
    z-index: 999;
    cursor: auto;
    min-width: 320px;
    /*border-radius: 10px;*/
}

.mapToolbar .altitude-panel .el-divider--horizontal {
    margin: 8px 0;
}

.mapToolbar .altitude-panel-title {
    font-size: 14px;
    font-weight: bold;
    line-height: 10px;
    color: #fff;
    margin-top: 0;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    /*border-bottom: 1px solid #eee;*/
}

.mapToolbar .altitude-panel .close {
    position: absolute;
    right: 7px;
    top: 9px;
}

.mapToolbar .baseMapPanel h4 {
    margin: 10px 0px;
}

.mapToolbar .measurePanel h4 {
    margin-top: 10px;
    margin-bottom: 7px;
}

.mapToolbar .bookmarkPanel h4 {
    margin-top: 10px;
    margin-bottom: 7px;
}

.mapToolbar .layer-items {
    margin: 10px;
}

.mapToolbar .layer-items a {
    width: 72px;
    float: left;
    text-align: center;
    line-height: 20px;
    font-size: 11px;
    font-family: "Microsoft YaHei";
    margin: 0px 5px;
}

.mapToolbar .layer-items .isChecked {
    color: #09b0ac;
}

.mapToolbar .layer-items .isChecked .el-image {
    border: #09b0ac 2px solid;
}

.mapToolbar .layer-arguments {
    margin-top: 4px;
    height: 23px;
    line-height: 23px;
    border-bottom: 1px solid #eee;
}

.mapToolbar .layer-arguments a {
    font-size: 13px;
}

.mapToolbar .layer-arguments a:hover {
    color: #337fe5;
    cursor: pointer;
}

.mapToolbar .layer-arguments .el-icon-location {
    color: #337fe5;
}

.mapToolbar .bookmarkPanel {
    width: 150px;
}

.mapToolbar .bookmarkPanel .layer-arguments {
    font-size: 13px;
}

.mapToolbar .bookmarkPanel .layer-arguments a {
    font-size: 15px;
}

.mapToolbar .bookmarkPanel .layer-arguments:hover {
    color: #337fe5;
    cursor: pointer;
}

.mapToolbar .searchPoiResult:hover {
    color: #337fe5;
    cursor: pointer;
}

.mapToolbar .searchHzResultName {
    font-size: 15px;
}

.mapToolbar .searchHzResultDuty {
    font-size: 12px;
}

.mapToolbar .tab-pane-header-btn-addBookmark {
    position: absolute;
    left: -19px;
    margin: 10px;
    top: -20px;
    font-size: 16px;
    transition: transform 0.3s;
    background-color: #337fe5;
    border-radius: 10px;
    color: #fff;
    padding: 2px;
    z-index: 900;
    cursor: pointer;
}

.mapToolbar .bookmarkDel {
    float: right;
    color: #f44336;
    font-size: 17px;
}

.mapToolbar .el-input-group {
    width: 260px;
}

.mapToolbar .layer-book {
    width: 100px;
}

.mapToolbar .el-input__inner {
    height: 30px;
    background-color: rgba(128, 128, 128, 0.5);
    color: white;
    border-radius: 0px;
}

.mapToolbar .el-input-group__append,
.mapToolbar .el-input-group__prepend {
    border-radius: 0px;
    color: #fff;
}

.mapToolbar .input-with-select:focus {
    border-radius: #2ec5ad;
}

.mapToolbar .infinite-list {
    margin: 10px 0;
    padding: 10px;
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
    overflow-style: #fff0;
    text-decoration: none;
}

.mapToolbar .infinite-list-item {
    font-size: 12px;
    list-style-type: none;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 1em;
    cursor: pointer;
}

/**
   * 分页背景
   */
.mapToolbar .el-pagination {
    background-color: #ffffff00;
    color: white;
}

/**
  * 地名地址数据类别背景透明
  */
.mapToolbar el-pagination .el-pager,
.el-pager li {
    background-color: #ffffff00;
}

/**
   * 分页上一页背景
   */
.mapToolbar .el-pagination .btn-prev {
    background-color: #ffffff00;
}

/**
  * 分页下一页背景
  */
.mapToolbar .el-pagination .btn-next {
    background-color: #ffffff00;
}

/**
  * 总共多少条背景颜色
  */
.mapToolbar .el-pagination span {
    color: white;
}

/**
   *
   */
.mapToolbar .poi-location {
    float: right;
    cursor: pointer;
}

/**
  * 地名搜索button背景透明
  */
.mapToolbar .el-input-group__append {
    background-color: #ffffff00;
}

/**去掉滚动条 */
.mapToolbar .infinite-list::-webkit-scrollbar {
    display: none;
}

.el-dialog {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

.el-dialog .el-dialog__title {
    color: white;
}

.el-dialog .el-dialog__body .el-form-item__label {
    color: white;
}

.el-dialog .el-dialog__footer .el-button {
    background-color: #ffffff00;
    color: white;
}

.el-dialog .el-input__inner {
    height: 30px;
    background-color: rgba(128, 128, 128, 0.5);
    color: white;
}

.mapToolbar .riverIsSelectActivate {
    color: #337fe5;
}

.mapToolbar .el-slider__runway.show-input {
    margin-right: 140px;
    width: auto;
    margin-left: 10px;
}

.mapToolbar .el-input__inner:focus {
    border-color: #398f8699;
}
</style>
